import React from 'react';
import {Empty} from '@uiw/react-native';
import {ComProps} from '../../routes';
import Layout, {Container} from '../../Layout';

const {Header, Body, Card, Footer} = Layout;

const xml = `
<svg viewBox="0 0 1024 1024" version="1.1" width="200" height="200">
  <path d="M65.28 903.68a448 44.928 0 1 0 896 0 448 44.928 0 1 0-896 0Z" fill="#C6C5C5" opacity=".31"></path>
  <path d="M665.344 108.672H182.912c-5.76 0-10.624 4.736-10.624 10.624v779.136c0 5.76 4.736 10.624 10.624 10.624h593.92c5.76 0 10.624-4.736 10.624-10.624V230.784l-122.112-122.112z" fill="#F4F4F4"></path>
  <path d="M776.96 914.304H183.04c-8.704 0-15.872-7.168-15.872-15.872V119.296c0-8.704 7.168-15.872 15.872-15.872h484.608l125.184 125.184v669.824c0 8.704-7.168 15.872-15.872 15.872zM182.912 114.048c-2.944 0-5.248 2.432-5.248 5.248v779.136c0 2.944 2.432 5.248 5.248 5.248h593.92c2.944 0 5.248-2.432 5.248-5.248V233.088l-119.04-119.04H182.912z" fill="#C6C5C5"></path>
  <path d="M702.336 78.72H220.032c-5.76 0-10.624 4.736-10.624 10.624v779.136c0 5.76 4.736 10.624 10.624 10.624h593.92c5.76 0 10.624-4.736 10.624-10.624V200.832l-122.24-122.112z" fill="#FFFFFF"></path>
  <path d="M813.952 884.352h-593.92c-8.704 0-15.872-7.168-15.872-15.872V89.344c0-8.704 7.168-15.872 15.872-15.872h484.608l125.184 125.184v669.824c0 8.704-7.168 15.872-15.872 15.872z m-593.92-800.384c-2.944 0-5.248 2.432-5.248 5.248v779.136c0 2.944 2.432 5.248 5.248 5.248h593.92c2.944 0 5.248-2.432 5.248-5.248V203.008l-119.04-119.04H220.032z" fill="#C6C5C5"></path>
  <path d="M824.576 206.208H712.96c-8.704 0-15.872-7.168-15.872-15.872V78.72h10.624v111.616c0 2.944 2.432 5.248 5.248 5.248h111.616v10.624z" fill="#C6C5C5"></path>
  <path d="M267.136 213.248h123.52" fill="#FFFFFF"></path>
  <path d="M267.136 202.624h123.52v21.12h-123.52z" fill="#C6C5C5"></path>
  <path d="M328.96 151.424v123.52" fill="#FFFFFF"></path>
  <path d="M318.336 151.424h21.12v123.52h-21.12z" fill="#C6C5C5"></path>
  <path d="M296.32 770.176h65.28" fill="#FFFFFF"></path>
  <path d="M296.32 765.952h65.28v8.448h-65.28z" fill="#C6C5C5"></path>
  <path d="M328.96 737.536v65.152" fill="#FFFFFF"></path>
  <path d="M324.736 737.536h8.448v65.28h-8.448z" fill="#C6C5C5"></path>
  <path d="M857.216 292.096h65.152" fill="#FFFFFF"></path>
  <path d="M857.216 287.872h65.28v8.448h-65.28z" fill="#C6C5C5"></path>
  <path d="M889.728 259.456v65.28" fill="#FFFFFF"></path>
  <path d="M885.632 259.456h8.448v65.28h-8.448z" fill="#C6C5C5"></path>
  <path d="M347.264 407.04c0-21.12 6.784-42.496 20.352-64.256 13.568-21.632 33.408-39.68 59.392-53.888 25.984-14.208 56.32-21.376 91.008-21.376 32.256 0 60.672 6.016 85.376 17.792 24.704 11.904 43.776 28.032 57.216 48.512s20.224 42.752 20.224 66.688c0 18.944-3.84 35.456-11.52 49.664-7.68 14.208-16.768 26.496-27.392 36.864-10.624 10.368-29.568 27.776-56.832 52.224-7.552 6.912-13.568 12.928-18.176 18.176-4.608 5.248-7.936 9.984-10.112 14.336-2.176 4.352-3.968 8.704-5.12 13.056-1.28 4.352-3.072 11.904-5.504 22.912-4.224 23.168-17.408 34.688-39.68 34.688-11.52 0-21.248-3.84-29.184-11.392-7.936-7.552-11.776-18.816-11.776-33.664 0-18.688 2.944-34.816 8.704-48.512s13.44-25.728 23.04-35.968c9.6-10.368 22.4-22.656 38.656-36.864 14.208-12.416 24.576-21.888 30.848-28.16 6.4-6.272 11.648-13.44 16-21.12 4.352-7.808 6.528-16.256 6.528-25.344 0-17.792-6.656-32.768-19.84-45.056-13.184-12.288-30.336-18.304-51.2-18.304-24.448 0-42.496 6.144-54.016 18.56-11.52 12.288-21.376 30.464-29.312 54.528-7.552 25.088-21.888 37.632-43.008 37.632-12.416 0-22.912-4.352-31.488-13.184-8.832-8.832-13.184-18.304-13.184-28.544z m162.816 365.568c-13.568 0-25.344-4.352-35.584-13.184-10.112-8.832-15.232-21.12-15.232-36.864 0-13.952 4.864-25.728 14.72-35.328 9.728-9.6 21.76-14.336 35.968-14.336 13.952 0 25.728 4.736 35.328 14.336 9.6 9.6 14.336 21.376 14.336 35.328 0 15.616-4.992 27.776-14.976 36.736-9.856 8.832-21.504 13.312-34.56 13.312z" fill="#D5D5D5"></path>
</svg>
`;

export interface DividerViewProps extends ComProps {}

export default class DividerView extends React.Component<DividerViewProps> {
  render() {
    const {route} = this.props;
    const description = route.params.description;
    const title = route.params.title;
    return (
      <Container>
        <Layout>
          <Header title={title} description={description} />
          <Body>
            <Card title="默认基础实例">
              <Empty />
            </Card>
            <Card title="自定义文字 label?: string">
              <Empty label="冇得数据咯" />
            </Card>
            <Card title="替换默认图标 xml?: string;">
              <Empty label="冇得数据咯" xml={xml} />
            </Card>
            <Card title="自定义图标尺寸 size?: number">
              <Empty label="冇得数据咯" size={120} />
            </Card>
            <Card title="自定义文字样式 labelStyle?: TextProps['style']">
              <Empty label="冇得数据咯" labelStyle={{color: 'red'}} />
            </Card>
          </Body>
          <Footer />
        </Layout>
      </Container>
    );
  }
}
